<script setup lang="ts">
import { routes } from '@/route/index.ts';
import { useRouteTabStore } from '@/store/index.ts';
import { getMenusByRoutes } from '@/tools/menu.ts';
import type { MenuItem, MenuState } from '@/types/index.ts';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const routeTabStore = useRouteTabStore();

const state = reactive<MenuState>({
	collapsed: false,
	selectedKeys: [],
	openKeys: [],
});

router.afterEach((to) => {
	const { key, parentKey } = to.meta;
	state.openKeys = [parentKey as string];
	state.selectedKeys = [key as string];
});

const items = getMenusByRoutes(routes);

const change = ({ item }: MenuItem) => {
	const { path } = item;
	router.push(path);
	routeTabStore.add({
		key: path,
		title: item.title,
	});
};
</script>

<template>
	<a-menu :force-sub-menu-render="true" v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys"
		mode="inline" :inline-collapsed="state.collapsed" :items="items" @click="change as Function">
	</a-menu>
</template>
<style scoped></style>
